﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Seguimiento.aspx.cs" Inherits="EncuentraWEB.Seguimiento2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Seguimiento en mapa</title>
    <link href="Encuentra.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .style3
        {
            width: 77px;
            height: 34px;
        }
        .style4
        {
            height: 542px;
            width: 77px;
        }
        .style6
        {
            width: 873px;
            height: 34px;
        }
        .style7
        {
            height: 542px;
            width: 873px;
        }
        .style8
        {
            width: 1068px;
            height: 34px;
        }
        #Cabecera
        {
            width: 100;
        }
        #map4
        {
            float: right;
            width: 86%;
            height: 92%;
        }
        #menu
        {
            float: left;
            width: 14%;
            height: 92%;
        }
        #Coches
        {
            padding: 5px 5px 5px 5px 5px;
        }
        .TituloPrincipal
        {
            background-color: ==Green;border=5px;border-color=#CEC5DA;}</style>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAW_vO5gTGD3WOujJaX3VyVhS3OLMgfgRH-fiS7wt-9Lvh34X5rRRKlLui90JJl0aYGoyZqjDDIJ0D1Q"
        type="text/javascript"></script>

    <script src="jquery.js" type="text/javascript"> 
    </script>

    <script type="text/javascript">
        //www.pigsys.net
        //http://localhost:62142/Default.aspx
        $(document).ready(function() {
        $("#chkRecorrido").click(function(event) {
                $.ajax({
                    type: "GET",
                    url: "http://www.pigsys.net/ServiceEncuentra.asmx/GetXmlRecorridos",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                    Recoridos2(msg);
                    },
                    error: AjaxError
                });
            });
        });

        function AjaxError(result) {
            alert("ERROR " + result.status + ' ' + result.statusText);
        }
        function Recoridos2(result) {
            if (document.getElementById("chkRecorrido").checked) {
                document.getElementById("HRecorrido").value= result.d ;
                if (document.getElementById("HRecorrido").value.length > 0) {
                    var xmlDoc = GXml.parse(document.getElementById("HRecorrido").value);
                    var posicion = xmlDoc.documentElement.getElementsByTagName("Punto");
                    for (var i = 0; i < posicion.length; i++) {
                        var lat = parseFloat(posicion[i].getAttribute("decLatitud"));
                        var lng = parseFloat(posicion[i].getAttribute("decLongitud"));
                        puntos[i] = new GLatLng(lat, lng);
                    }

                }
                routeOverlay = new GPolyline(puntos, '#FF9601', 5, 0.6);
                map.addOverlay(routeOverlay);
            }
            else {
               map.clearOverlays();
               routeOverlay = null;
            }
            cargarxml2();
        }
        function ejecutar() {
            var c = Coches();
            $.ajax({
                type: "POST",
                url: "http://www.pigsys.net/ServiceEncuentra.asmx/GetSelectObjectXML",
                data: "{'Coche':'" + c + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    cargarxml2(msg);
                },
                error: AjaxError
            });
        }
        function cargarxml2(result) {
            document.getElementById("Hidden1").value = result.d;
            map.clearOverlays();
            if (routeOverlay != undefined)
            { map.addOverlay(routeOverlay); }

            if (document.getElementById("Hidden1").value.length > 0) {
                var xmlDoc = GXml.parse(document.getElementById("Hidden1").value);
                var posicion = xmlDoc.documentElement.getElementsByTagName("marca");
                for (var i = 0; i < posicion.length; i++) {
                    var lat = parseFloat(posicion[i].getAttribute("decLatitud"));
                    var lng = parseFloat(posicion[i].getAttribute("decLongitud"));
                    var punto = new GLatLng(lat, lng);
                    var equipo = posicion[i].getAttribute("varIdButton");
                    var Hora = posicion[i].getAttribute("datUltimoDato");
                    var html = posicion[i].getAttribute("html");
                    CrearMarca(punto, equipo + " - " + Hora, html);
                }
            }

        }

        
    </script>

    <script type="text/javascript">
        var map;
        var snapToRoute;
        var routeOverlay;
        var lookingGlass;
        var puntos = new Array();
        var count = 0;

        function Recoridos() {

            if (document.getElementById("chkRecorrido").checked) {
                EjecuarWebServices('http://www.pigsys.net/ServiceEncuentra.asmx', 'GetXmlRecorridos', '')
                if (document.getElementById("HRecorrido").value.length > 0) {
                    var xmlDoc = GXml.parse(document.getElementById("HRecorrido").value);
                    var posicion = xmlDoc.documentElement.getElementsByTagName("Punto");
                    for (var i = 0; i < posicion.length; i++) {
                        var lat = parseFloat(posicion[i].getAttribute("decLatitud"));
                        var lng = parseFloat(posicion[i].getAttribute("decLongitud"));
                        puntos[i] = new GLatLng(lat, lng);
                    }

                }
                routeOverlay = new GPolyline(puntos, '#FF9601', 5, 0.6);
            }
            else {
                map.clearOverlays();
                routeOverlay = null;
            }
            cargarxml();
        }
        function PABLO() {

            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map4"));
                map.setCenter(new GLatLng(-32.946135, -60.684550), 14);
                //map.setMapType(G_NORMAL_MAP);
                map.setMapType(G_HYBRID_MAP);
                map.addControl(new GLargeMapControl());
                map.addControl(new GOverviewMapControl());
                puntitos = 0;
                punLat = 0;
                punLong = 0;
                count = 0;
                ejecutar();

                //    GEvent.addListener(map, "click", tratamiento_clic);

                setInterval(ejecutar, 15000);
            }
        }
        //localhost:49768



        function web(c) {
            EjecuarWebServices('http://www.pigsys.net/ServiceEncuentra.asmx', 'GetSelectObjectXML', c);

        }

        function Coches() {
            var filtro = "";
            var tree = document.getElementById("TreeView1");
            var tables = tree.getElementsByTagName('table');
            if (tables) {
                for (var i = 0, j = tables.length; i < j; i++) {
                    var childTreeLevel = tables[i].rows[0].cells.length;
                    var cell = tables[i].rows[0].cells[childTreeLevel - 1];

                    var inputs = cell.getElementsByTagName("INPUT");
                    if (inputs[0].checked) {

                        links = tables[i].getElementsByTagName('a');
                        if (links) {
                            for (var x = 0, y = links.length; x < y; x++) {

                                if (links[x].firstChild.nodeName.toLowerCase() == '#text') {
                                    var result = links[x].firstChild.parentNode.href.toLowerCase().indexOf("coc");
                                    if (result != -1) {
                                        var coche = links[x].firstChild.parentNode.href.substring(result + 3)
                                        result = coche.indexOf("')");
                                        coche = coche.substring(1, result - 1);
                                        filtro = filtro + coche + ","
                                    }
                                }
                            }
                        }
                    }
                }
            }

            return filtro;
        }


        function cargarxml() {
            var c = Coches();
            web(c);
            map.clearOverlays();
            if (routeOverlay != undefined)
            { map.addOverlay(routeOverlay); }

            if (document.getElementById("Hidden1").value.length > 0) {
                var xmlDoc = GXml.parse(document.getElementById("Hidden1").value);
                var posicion = xmlDoc.documentElement.getElementsByTagName("marca");
                for (var i = 0; i < posicion.length; i++) {
                    var lat = parseFloat(posicion[i].getAttribute("decLatitud"));
                    var lng = parseFloat(posicion[i].getAttribute("decLongitud"));
                    var punto = new GLatLng(lat, lng);
                    var equipo = posicion[i].getAttribute("varIdButton");
                    var Hora = posicion[i].getAttribute("datUltimoDato");
                    var html = posicion[i].getAttribute("html");
                    CrearMarca(punto, equipo + " - " + Hora, html);
                }
            }

        }

        function CrearMarca(punto, Descripcion, html) {
            var EtpIcon = new GIcon(G_DEFAULT_ICON);
            EtpIcon.image = "/Imagenes/busazul1.png";
            EtpIcon.iconSize = new GSize(21, 32);
            EtpIcon.shadowSize = new GSize(0, 0);
            markerOptions = { icon: EtpIcon, title: Descripcion }
            var pos = new GMarker(punto, markerOptions);
            GEvent.addListener(pos, "click", function() {
                pos.openInfoWindowHtml(html);
            });
            map.addOverlay(pos);
        }
        function TipoMapaSatelite() {

            if (document.getElementById("rdSatelite").checked) {
                map.setMapType(G_HYBRID_MAP);
                document.getElementById("rdSatelite").checked = true;
                document.getElementById("rdMapa").checked = false;
            }
        }
        function TipoMapaPlano() {
            if (document.getElementById("rdMapa").checked) {
                map.setMapType(G_NORMAL_MAP);
                document.getElementById("rdSatelite").checked = false;
                document.getElementById("rdMapa").checked = true;
            }
        }

    </script>

</head>
<body bgcolor="#47446f">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="WebServiceProxy.js" />
        </Scripts>
    </asp:ScriptManager>
    <div id="wrapper" style="width: 100%; height: 100%; position: absolute; top: 0px;
        left: 0px;">
        <div id="Cabecera">
            <table>
                <tr>
                    <td style="width: 14%" bgcolor="#CEC5DA">
                        <input id="Hidden1" type="hidden" />
                        <input id="HRecorrido" type="hidden" />
                        <a href="principal.aspx">
                            <img border="0" src="Imagenes/encuentra.gif" width="70%" height="70%"></a>
                    </td>
                    <td bgcolor="#CEC5DA" class="style8" valign="middle">
                        <asp:Panel ID="Panel2" runat="server">
                            <asp:Label ID="Label13" runat="server" Text="Seguimiento de flota en mapa" CssClass="Titulos"></asp:Label>
                        </asp:Panel>
                    </td>
                    <td bgcolor="#CEC5DA" width="7%">
                        <a href="http://www.novacore.com.ar">
                            <img border="0" src="Imagenes/NOVACORE.gif" width="100%" height="100%"></a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="map4">
        </div>
        <div id="menu">
            <div id="TituloCapa">
                <td style="width: 14%" bgcolor="#CEC5DA">
                    <input id="Hidden2" type="hidden" />
                    <input id="Hidden3" type="hidden" />
                    <asp:Image ID="Image2" runat="server" Height="100%" ImageUrl="~/Imagenes/capas.jpg"
                        Width="100%" />
                </td>
            </div>
            <div id="TituloPrincipal" style="border-width: medium; border-color: #47446f; background-color: #42d161;
                border-top-style: solid; border-bottom-style: solid;">
                <asp:Label ID="Label2" runat="server" Text="   Principal" CssClass="TitulosSeguimiento"
                    Font-Bold="true"></asp:Label>
            </div>
            <div id="Coches">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TreeView ID="TreeView1" runat="server" CssClass="treeview" ShowCheckBoxes="All"
                            ForeColor="#47446f" Width="100%" ShowExpandCollapse="False" BackColor="#CEC5DA">
                        </asp:TreeView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div id="TituloRecorrido" style="border-width: medium; border-color: #47446f; background-color: #42d161;
                border-top-style: solid; border-bottom-style: solid;">
                <asp:Label ID="Label3" runat="server" Text="   Recorridos" CssClass="TitulosSeguimiento"
                    Font-Bold="true"></asp:Label>
            </div>
            <div id="Capas" style="background-color: #CEC5DA; font-family: Arial; font-size: 15px;
                color: #47446f;">
                
                <input id="chkRecorrido" type="checkbox" /> Visualizar
                
            </div>
            <div id="TituloMapa" style="border-width: medium; border-color: #47446f; background-color: #42d161;
                border-top-style: solid; border-bottom-style: solid;">
                <asp:Label ID="Label5" runat="server" Text="   Mapa" CssClass="TitulosSeguimiento"
                    Font-Bold="true"></asp:Label>
            </div>
            <div id="TipoMapa" style="background-color: #CEC5DA; font-family: Arial; font-size: 15px;
                color: #47446f;">
                <input id="rdMapa" type="radio" checked="checked" onclick="javascript:TipoMapaPlano();" />
                Mapa
                <br />
                <input id="rdSatelite" type="radio" onclick="javascript:TipoMapaSatelite();" />
                Satélite
            </div>
        </div>
    </div>
    </form>
</body>
</html>
